<template>
	<view class="content">
		<view class="header">
			<view class="tabs" style="width: 50%;">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#666666'}"
					:activeStyle="{color:'#121212'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<view class="box">
			<view class="info" v-if="current == 0">
				<view class="status font28">
					等待上钟
				</view>
				<view class="call">
					<view class="icon">


						<image src="../../../static/images/technician/call.png" mode="aspectFit"></image>


						<image src="../../../static/images/technician/call.png" mode="aspectFit"></image>

						<image src="/technicianadd/static/images/call.png" mode="aspectFit"></image>



						<image src="/technicianadd/static/images/call.png" mode="aspectFit"></image>

					</view>
					<view class="title font28">
						呼叫
					</view>
				</view>
				<view class="time">
					<view class="bold">
						{{ hours}}:{{minutes}}
					</view>
					<view class="regular">
						{{seconds}}
					</view>
				</view>
				<view class="h_info">
					<view class="house">
						<view class="icon">


							<image src="../../../static/images/technician/house.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/house.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/house.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/house.png" mode="aspectFit"></image>

						</view>
						<view class="title font28 font500">
							房间206
						</view>
					</view>
					<view class="technician">
						<view class="icon">


							<image src="../../../static/images/technician/tabs.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/tabs.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/tabs.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/tabs.png" mode="aspectFit"></image>

						</view>
						<view class="title font28 font500">
							技师大乔
						</view>
					</view>
				</view>
				<view class="collapse">
					<l-collapse :accordion="true">
						<l-collapse-item title="调理足疗110分钟" titleImg="">
							<view class="contents">

							</view>
						</l-collapse-item>
					</l-collapse>
				</view>
				<view class="mark font26">
					备注：2323232
				</view>
			</view>
			<view class="oderInfo" v-if="current == 1">
				<view class="left" style="margin-bottom: 63rpx;">
					<view class="status font28">
						已结账
					</view>
					<view class="u_colck">
						<view class="icon">


							<image src="../../../static/images/technician/time.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/time.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/time.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/time.png" mode="aspectFit"></image>

						</view>
						<view class="title font26">
							上钟时间：2024-09-11 20:33
						</view>
					</view>
				</view>
				<view class="left" style="margin-bottom: 44rpx;">
					<view class="ping">
						<view class="icon">


							<image src="../../../static/images/shopowner/contracts.png" mode="aspectFit"></image>


							<image src="../../../static/images/shopowner/contracts.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/contracts.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/contracts.png" mode="aspectFit"></image>

						</view>
						<view class="title font28">
							评价
						</view>
					</view>
					<view class="d_colck font26">
						下钟：2024/09/11/ 21:33
					</view>
				</view>
				<view class="h_info">
					<view class="house">
						<view class="icon">


							<image src="../../../static/images/technician/house.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/house.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/house.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/house.png" mode="aspectFit"></image>

						</view>
						<view class="title font28 font500">
							房间206
						</view>
					</view>
					<view class="technician">
						<view class="icon">


							<image src="../../../static/images/technician/tabs.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/tabs.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/tabs.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/tabs.png" mode="aspectFit"></image>

						</view>
						<view class="title font28 font500">
							技师大乔
						</view>
					</view>
				</view>
				<view class="collapse">
					<l-collapse :accordion="true">
						<l-collapse-item title="调理足疗110分钟" titleImg="">
							<view class="contents">

							</view>
						</l-collapse-item>
					</l-collapse>
				</view>
				<view class="mark">
					<view class="title font26">
						服务情况
					</view>
					<view class="situation font26">
						客户很满意
					</view>
				</view>
			</view>
			<view class="btnBox">
				<view class="btnB"></view>
				<view class="yuan"></view>
				<view class="left">
					<view class="a_clock" :class="type == 1 || current == 1?'jis':''" @click="a_colck">
						<view class="icon" v-if="type == 0 && current == 0">





							<image src="../../../static/images/technician/jia.png" mode="aspectFit"></image>
						</view>
						<view class="icon" v-if="type == 1 || current == 1">
							<image src="../../../static/images/technician/jiaz.png" mode="aspectFit"></image>





							<image src="/technicianadd/static/images/jia.png" mode="aspectFit"></image>
						</view>
						<view class="icon" v-if="type == 1 || current == 1">
							<image src="/technicianadd/static/images/jiaz.png" mode="aspectFit"></image>





						</view>
						<view class="title font34">
							加钟
						</view>
					</view>
					<view class="btn" @click="startStopTimer" v-if="current == 0">
						{{type == 0?'上钟':'下钟'}}
					</view>
					<view class="btn" style="flex-direction: column;" v-if="current == 1">
						恢复<br>上钟
					</view>
					<view class="des">
						<view class="icon">


							<image src="../../../static/images/technician/pay.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/pay.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/pay.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/pay.png" mode="aspectFit"></image>

						</view>
						<view class="title font34">
							买单详情
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalSeconds: 110 * 60,
				hours: '00',
				minutes: '00',
				seconds: '00',
				s_daoji: null,
				current: 0,
				type: 0,
				tabsList: [{
					name: '上钟'
				}, {
					name: '下钟'
				}]
			};
		},
		onLoad() {
			this.hours = Math.floor(this.totalSeconds / 3600);
			this.minutes = Math.floor((this.totalSeconds % 3600) / 60);
			this.seconds = this.totalSeconds % 60;
		},
		methods: {
			tabsClick(e) {
				this.current = e.index
			},
			startStopTimer() {
				this.type = 1
				this.daoji()
				this.s_daoji = setInterval(() => {
					this.daoji()
				}, 1000)
			},
			daoji() {
				if (this.totalSeconds > 0) {
					this.hours = Math.floor(this.totalSeconds / 3600);
					this.minutes = Math.floor((this.totalSeconds % 3600) / 60);
					this.seconds = this.totalSeconds % 60;
					this.totalSeconds--;
				} else {
					clearInterval(this.s_daoji);
				}
			},
			a_colck() {
				if (this.type == 0) {
					return
				} else {

				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			display: flex;
			justify-content: center;
			padding: 37rpx 0 18rpx 0;
			background-color: #fff;
		}

		.box {
			padding: 14rpx 29rpx;

			.info {
				padding: 28rpx 24rpx;
				background-color: #fff;

				.status {
					color: #999999;
					margin-bottom: 60rpx;
				}

				.call {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-bottom: 50rpx;

					.icon {
						width: 27rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						margin-right: 8rpx;

						image {
							width: 27rpx;
							height: 32rpx;
						}
					}

					.title {
						color: #FF8E00;
					}
				}

				.time {
					color: #AAAAAA;
					position: relative;
					display: flex;
					justify-content: center;
					margin-bottom: 90rpx;

					.bold {
						font-weight: 400;
						font-size: 170rpx;
						color: #AAAAAA;
					}

					.regular {
						position: absolute;
						font-weight: 400;
						font-size: 60rpx;
						color: #AAAAAA;
						right: 30rpx;
						bottom: 30rpx;
					}
				}

				.h_info {
					display: flex;
					align-items: center;
					padding: 26rpx 0 26rpx 30rpx;
					margin-bottom: 26rpx;

					.house {
						display: flex;
						align-items: center;
						margin-right: 28rpx;

						.icon {
							width: 31rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 31rpx;
								height: 30rpx;
							}
						}

						.title {}
					}

					.technician {
						display: flex;
						align-items: center;

						.icon {
							width: 29rpx;
							height: 29rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.title {}
					}
				}

				.collapse {
					position: relative;
					margin-bottom: 30rpx;

					.contents {}

					/deep/.l-collapse {
						.l-collapse-item {
							.l-collapse-item__title {
								.l-collapse-item__title-wrap {
									.l-collapse-item__title-box {
										.l-collapse-item__title-img {
											width: 8rpx;
										}

										.l-collapse-item__title-text {
											font-size: 26rpx;
											color: #333333;
										}
									}
								}

								.l-collapse-item__title-arrow {
									position: absolute;

									.icon-xiala {
										font-size: 40rpx;
									}
								}
							}
						}
					}
				}

				.mark {}
			}

			.oderInfo {
				.left {
					justify-content: space-between;

					.status {}

					.u_colck {
						display: flex;
						align-items: center;

						.icon {
							width: 26rpx;
							height: 26rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.title {
							color: #999999;
						}
					}

					.ping {
						display: flex;
						align-items: center;

						.icon {
							width: 28rpx;
							height: 28rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.title {
							color: #1EB481;
						}
					}

					.d_colck {}
				}

				.h_info {
					display: flex;
					align-items: center;
					padding: 26rpx 0 26rpx 30rpx;
					margin-bottom: 26rpx;

					.house {
						display: flex;
						align-items: center;
						margin-right: 28rpx;

						.icon {
							width: 31rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 31rpx;
								height: 30rpx;
							}
						}

						.title {}
					}

					.technician {
						display: flex;
						align-items: center;

						.icon {
							width: 29rpx;
							height: 29rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.title {}
					}
				}

				.collapse {
					position: relative;
					margin-bottom: 30rpx;

					.contents {}

					/deep/.l-collapse {
						.l-collapse-item {
							.l-collapse-item__title {
								.l-collapse-item__title-wrap {
									.l-collapse-item__title-box {
										.l-collapse-item__title-img {
											width: 8rpx;
										}

										.l-collapse-item__title-text {
											font-size: 26rpx;
											color: #333333;
										}
									}
								}

								.l-collapse-item__title-arrow {
									position: absolute;

									.icon-xiala {
										font-size: 40rpx;
									}
								}
							}
						}
					}
				}

				.mark {
					.title {
						color: #333333;
					}

					.situation {
						padding: 33rpx 46rpx;
						color: #333333;
					}
				}
			}

			.btnBox {
				position: relative;
				height: 174rpx;
				margin-top: 50rpx;

				.btnB {
					height: 162rpx;
					box-shadow: 0rpx 1rpx 5rpx 1rpx rgba(208, 215, 229, 0.2);
					border-radius: 28rpx 28rpx 10rpx 10rpx;
					border: 1px solid #D0D7E5;
					position: absolute;
					width: 100%;
					bottom: 0;
					z-index: 1;
					background: #fff;
				}

				.yuan {
					position: absolute;
					width: 174rpx;
					height: 174rpx;
					border-radius: 50%;
					background: #fff;
					border: 2rpx solid #D0D7E5;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}

				.left {
					height: 162rpx;
					position: absolute;
					width: 100%;
					z-index: 2;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					bottom: 0;

					.a_clock {
						display: flex;
						align-items: center;
						width: 219rpx;
						height: 87rpx;
						background: #FAFAFA;
						border-radius: 100rpx;
						border: 1px solid #D7DAE0;
						justify-content: center;

						.icon {
							width: 36rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.title {
							color: #D7DAE0;
						}
					}

					.jis {
						border: 1px solid #545454;

						.title {
							color: #545454;
						}
					}

					.btn {
						width: 155rpx;
						height: 155rpx;
						border-radius: 50%;
						background: #1EB481;
						border: 11rpx solid #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						margin-bottom: 17rpx;
					}

					.des {
						display: flex;
						align-items: center;
						width: 219rpx;
						height: 87rpx;
						background: #FAFAFA;
						border-radius: 100rpx;
						border: 1px solid #545454;
						justify-content: center;

						.icon {
							width: 36rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.title {
							color: #545454;
						}
					}
				}
			}
		}
	}
</style>